import React,{useState,useEffect} from "react";
import { Menu } from "antd";
import { adminRoutes } from "@/router"; //在craco.config.js中配置路径别名后才能使用
import { withRouter } from "react-router-dom";
import _ from 'lodash'
import {connect} from 'react-redux'

// console.log(routes);
// console.log(adminRoutes[0]===routes[0]);

function SideMenu(props) {
  let [routeList,setRouteList] = useState([])  //深度克隆，避免影响原始数据包
  useEffect(()=>{
    let routes = _.cloneDeep(adminRoutes)
    let {rolecode} = props.user.userInfo  //提取当前登录用户的角色代号
    _.remove(routes,(item)=>{
      return item.hide || !item.roles.includes(rolecode)
    })
    routes.forEach(item=>{
      if(item.children){
        _.remove(item.children,(itm)=>{
          return itm.hide || !itm.roles.includes(rolecode)
        })
      }
    })
    setRouteList(routes)
  },[])
  
  let handleMenu = (obj)=>{
    console.log('菜单参数',obj);
    props.history.push(obj.key)
  }
  return (
    <Menu
      theme="dark"
      defaultSelectedKeys={["1"]}
      mode="inline"
      items={routeList}
      onClick={handleMenu}
    />
  );
}

export default connect(({user})=>({user}))(withRouter(SideMenu))